	<include file="Index/header" />
	
	
	
	
	
			<!--<ul class="cs_newsbox">
				<li>
					<div class="cs_thumb_pic" style="background-image: url(../../../../Public/images/image_1.jpg);"></div>
					<h5>文章标题文章标题</h5>
				</li>
				<li>
					<div class="cs_thumb_pic" style="background-image: url(../../../../Public/images/image_1.jpg);"></div>
					<h5>文章标题文章标题</h5>
				</li>
				
			</ul>-->
	
	
	
	<div class="col-md-12 cs_daohangqi hidden-xs">
		<span><a href="/">全部分类</a></span><span style="margin-left: 20px; margin-right: 20px;"><i class="fa  fa-forward"></i> </span> <span>{$catid|getCatName=$webSiteMenu,###}</span>
	</div>
	<!--文章列表-->
	<div id="cs_container" class="container" style="margin-left: auto;margin-right: auto;">
		<div class="col-md-8 cs_newslist" >
			<div id="device" class="gridalicious">
			    <foreach name="news" item="vo">
			          <div class="item" >
						<div >
							<a href="/index.php?c=detail&id={$vo.news_id}"><img src="{$vo.thumb}"/></a>
							<p class="cs_title">{$vo.title}</p>
							<div class="cs_info_tips">
								<span class="fa fa-clock-o cs_time_inf">{$vo.create_time|date="Y-m-d",###}</span><span class="fa fa-eye cs_eyes_inf">{$vo.count}</span><span class="fa  fa-thumbs-o-up cs_zan_inf">{$vo.news_id}</span>	
							</div>
							
						</div>
					  </div>
			    	
			    </foreach>	
					  
	         <!--<div class="item" >
				
					<img src="../../../../Public/images/image_1.jpg"/>
					<p class="cs_title">文章标题</p>
					<div class="cs_info_tips">
						<span class="fa fa-clock-o">2016-12-12</span> <span class="fa fa-eye">122</span>	<span class="fa  fa-thumbs-o-up">35</span>	
					</div>
				
			  </div>-->
					  
			   
			   
			      	  
			    
			   
			  
			    
			    
			    <div id="clearKIqp5" style="clear: both; height: 0px; width: 0px; display: block;"></div>
			  </div>
		</div>
		<div class="col-md-4 hidden-xs cs_side">
			<div class="" style="background-color: #777;color: #fff;text-align: center;">
				最新评论
			</div>
			<div class="cs_rank_list">
				
			</div>
			
			<div class="cs_banner_sale">
				
			</div>
		</div>
	</div>
	<!--文章列表end-->
	
	
    
	
	<!--透明背景窗口 -->
	<div class="fh5co-cta" style="background-image: url(/Public/images/slide_2.jpg);">
		<div class="overlay"></div>
		<div class="container">
			<div class="col-md-12 text-center animate-box">
				<h3>We Try To Update The Site Everyday</h3>
				<p><a href="#" class="btn btn-primary btn-outline with-arrow">Get started now! <i class="fa fa-arrow-right"></i></a></p>
			</div>
		</div>
	</div>
	<!--透明背景窗口end -->
	
	<!--底部内容-->
	<script src="/Public/js/jquery-1.11.0.js"></script>
	<script src="/Public/js/dialog.js" type="text/javascript" charset="utf-8"></script>
	<script src="/Public/js/dialog/layer.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
			var postStatus = 1;
            makeboxes = function() {
			start_num = $("#device .item").length+1;
			console.log(start_num);
                var boxes = new Array;   
                var url = '/index.php?c=cat&a=getListAjax';
                var postData ={};
                postData['catid'] = "{$catid}";
                postData['start_num'] = start_num;
                postData['pageSize'] = 10;
//              console.log(JSON.stringify(postData));
                if (postStatus == 1) {
	                $("#reloade").show();
					var display =$('#reloade').css('display');
					
	                $.post(url,postData,function(result){
						if (result.status==1) {
						 console.log(JSON.stringify(result));
						
						 $("#reloade").hide();
						$(document.body).css({
						   "overflow-x":"auto",
						   "overflow-y":"auto"
						});
						for (i=0; i<result.data.length; i++) {
							var list = result.data[i];
							div = $('<div></div>').addClass('item');
							p = '<a href="/index.php?c=detail&id='+list.news_id+'"><img src="'+list.thumb+'"/></a><p class="cs_title">'+list.title+'</p><div class="cs_info_tips"><span class="fa fa-clock-o">'+format_Date(list.create_time)+'</span> <span class="fa fa-eye">122</span><span class="fa  fa-thumbs-o-up">35</span></div>';
							div.append(p);
		                    boxes.push(div);
						} 
						$("#device").gridalicious('append',boxes);
						}else if(result.status==0){
						$("#reloade").hide();
						$(document.body).css({
						   "overflow-x":"auto",
						   "overflow-y":"auto"
						});
						 postStatus = -1;
						 return	dialog.tips(result.message);
						}
						
					},'json');
                	
                }
					
				
				
            }
            
        function scrolls () {
		    
		    $(window).scroll(function () {
		        
		       
		       
		    });
		}

        $(document).ready(function () {
        		var beforeScrollTop = document.body.scrollTop;
                $(window).scroll(function () {
                	var afterScrollTop = document.body.scrollTop;
                	delta = afterScrollTop - beforeScrollTop;
					if (delta>0) {
				        beforeScrollTop = afterScrollTop;
						console.log("down");
	                    if(($(window).scrollTop() +300) >= $("#cs_container").height()) {	
	                    	var display =$('#reloade').css('display');
							if ( display == 'none' ) {
		                    	makeboxes();
							}
	                    }
//						return "down";
					}else{
						console.log("up");
//						return "up";
					}
                	console.log(afterScrollTop+"--"+beforeScrollTop);
//              	console.log($("#cs_container").height());
                });
//                      $("#device").gridalicious('append', makeboxes());
			
            

            $("#device").gridalicious({
                gutter: 10,
                width: 200,
                animate: true,
                animationOptions: {
                        speed: 150,
                        duration: 400,
                        complete: onComplete
                },
            });

            //未使用
            function onComplete(data) { 
            	
            }

        });
        
//      时间戳格式化
        function format_Date(now) { 
			var year=now.getYear(); 
			var month=now.getMonth()+1; 
			var date=now.getDate(); 
			var hour=now.getHours(); 
			var minute=now.getMinutes(); 
			var second=now.getSeconds(); 
			return "20"+year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second; 
		} 
       
    </script>

	
	
	
	<include file="Index/footer" />